<template>
  <div class="info">
    <div class="box2">
      <el-row>
        <el-col :span="24">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="角色名称" prop="roleid" >
              <el-select v-model="ruleForm.roleid">
                <el-option
                  v-for="(item,index) in roleList"
                  :key="index"
                  :label="item.rolename"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="管理员名称" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="管理员密码" prop="password">
              <el-input v-if="$route.params.uid" type="password" v-model="ruleForm.password" autocomplete="off" placeholder="留空为不修改密码"></el-input>
              <el-input v-else type="password" v-model="ruleForm.password" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
              <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button v-if="$route.params.uid" type="danger" @click="submitForm('ruleForm')">立即修改</el-button>
              <el-button v-else type="success" @click="submitForm('ruleForm')">立即添加</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {getAdminOptaion} from '../../request'
export default {
  data() {
    var roleId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("角色名称不能为空"));
      } else {
        callback();
      }
    };
    var userName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("管理员名称不能为空"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        roleid: "",
        username: "",
        password: "",
        status: 1
      },
      roleList: [],
      rules: {
        roleid: [{ required: true, validator: roleId, trigger: "blur" }],
        username: [{ required: true, validator: userName, trigger: "blur" }],
      }
    };
  },
  created() {
    this.getRoleList();
    //判断新增还是修改
    if (this.$route.params.uid) {
      this.getDataById(this.$route.params.uid);
    }
  },
  methods: {
    async getRoleList() {
      let res=await getAdminOptaion();
      this.roleList=res;
    },
    getDataById(uid) {
      this.$http.get("/userinfo", { params: { uid } }).then(res => {
        this.ruleForm = res.data.list;
        this.ruleForm.password='';
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 校验成功
          if (this.$route.params.uid.length > 0) {
            //修改
            this.ruleForm.uid = this.$route.params.uid;
            this.$http
              .post("/useredit", this.ruleForm)
              .then(res => {
                this.$router.go(-1);
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            this.$http
              .post("/useradd", this.ruleForm)
              .then(res => {
                this.$router.go(-1);
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else {
          // 检验失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="" >
.info {
  width: 100%;
  height: auto;
  background: #fff;
}
.box2 {
  width: 500px;
  margin: auto;
  padding-top: 20px;
}
</style>